{% extends 'base/base.html' %}
{% load static %}
{% block title %}
    商品详情
{% endblock %}
{% block extcss %}
    <link rel="stylesheet" href="{% static 'product_detail/css/product_details.css' %}"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
{% endblock %}

{% block extjs %}
    <script src="{% static 'product_detail/js/product_details.js' %}"></script>
    <script src="{% static 'base/js/jquery.cookie.js' %}"></script>
{% endblock %}

{% block content %}
    <!--主体部分  开始-->
    <div class="main_pd_wrap">
        <!--当前位置-->
        <div class="navAdd">
            您的当前位置：
            <a href="/bbf/">中草药百科大全</a>
            >
            <a href="">{{ cao_yao_kind.kind_name }}></a>
            <a href="">{{ caoyaoDetail.name }}</a>
        </div>

        <!--商品主体部分-->
        <div class="main">
            <!--左侧-->
            <div class="main_left">
                <!--放大镜-->
                <div class="jqzoom">
                    <img id="smallImg" class="smallImg" src="{{ caoyaoDetail.images }}  " alt=""/>
                    <div id="smallArea" class="smallArea"
                         style="display: none; width: 100px; height: 100px;background: rgba(200, 255, 200, 0.3); position: absolute; left: 50px; top: 20px; "></div>
                </div>
                <div id="bigArea" class="bigArea"
                     style="display: none; overflow: hidden; width: 310px; height:310px; background: rgba(100,200,100, 0.3); position: absolute; left: 350px; top: 0px;">
                    <img id="bigImg" class="bigImg" src="{{ caoyaoDetail.images }}"/>
                </div>
                <!--小图列表-->
                <div class="pic_mim_ni">
                    <ul class="mini_list">
                        <li><img src="{{ caoyaoDetail.images }}"/></li>
                    </ul>
                </div>


                <!--扫二维码-->
                <div class="clear">
                    <div>
                        <img src="http://qr.topscan.com/api.php?text={{ request.build_absolute_uri }}"
                             style="display: inline;" title="打开手机浏览器扫一扫！"/>
                    </div>
                </div>
            </div>

            <!--中间   开始-->
            <div class="main_mid">


                <!--商品详情  开始-->
                <ul class="pro_msg">

                    <div class="zbzhg">
                        <a class="zhengpin_brand" href="">
                            <span class="firstSpan"></span>
                            <span class="lastSpan">{{ cao_yao_kind.kind_name }}</span>
                        </a>
                        <div class="zhonghuabaoxian"></div>
                    </div>
                    <div class="row">

                        <li>
                            <span class="fontGrey2">草药名称：</span>
                            <span class="price_shang "><span id="pic2">{{ caoyaoDetail.name }}</span></span>
                        </li>
                        <li>
                            <span class="fontGrey2">校内种植地址：</span>
                            <span class="fontGrey1 fontNum">{{ caoyaoDetail.xiaoneizhongzhidizhi }}</span></span>
                        </li>

                        <li>
                            <span class="fontGrey2">草药简介：</span>
                            <span class="fontGrey1 fontNum" id="goodsId">{{ caoyaoDetail.jianjie }}</span>
                        </li>
                    <a href="/bbf/shoucang?ren={{ user.id }}&caoyao={{ caoyaoDetail.id }}">
                        <div style="text-align: right;font-size: 15px">
                            <span class="glyphicon glyphicon-star{{ shoucangString }}" aria-hidden="true"></span>
                            {% if shoucangString == '' %}
                                <span class="glyphicon-class">点击取消收藏</span>
                            {% else %}
                                <span class="glyphicon-class">收藏该草药</span>
                            {% endif %}

                        </div>
                    </a>
                        <li class="clearfix">
                            <div class="page-header">
                                <h1>草药功效：</h1>
                            </div>

                            <div class="col-12">
                                <p><span class="fontBlue">{{ caoyaoDetail.gongxiao }}</span></p>
                            </div>
                        </li>
                    </div>
                    <div class="row">
                        <li>
                            <div class="page-header">
                                <h1>相关评论：</h1>
                            </div>

                            {% for onePinglun in pingluninfo %}
                                <div class="alert alert-info">

                                    <p><b>{{ onePinglun.pinglunren.mobile }}</b>:{{ onePinglun.pinglun.pinglunneirong }}
                                    </p>
                                    <p class="right">{{ onePinglun.pinglun.pinglunshijian }}</p>

                                </div>
                            {% endfor %}


                        </li>
                    </div>

                    <div class="row">
                        <li>
                            <span class="text-primary">我<em></em>要<em></em>评<em></em>论：</span>
                            <form action="/bbf/pinglun/" method="post">
                                <input hidden name="duixiang" value="{{ caoyaoDetail.id }}">
                                <textarea type="text" name="pinglunneirong" rows="5" cols="80"></textarea>
                                <div class="center align-center" style="text-align: center">
                                    <input type="reset" value="清空" class="btn btn-danger"/>
                                    <input type="submit" value="立即发表" class="btn btn-info"/>
                                </div>
                            </form>
                        </li>
                    </div>
                </ul>

                <div class="notice fontGrey2">

                    <span>
               				<b style="color:red;font-size:14px">[温馨提示] </b>
               				1、请正确发表言论。
               				2、请发表相关言论，谢谢！
               			</span>
                </div>
            </div>
            <!--中间   结束-->

            <!--右侧   开始-->
            <div class="main_rgt">
                <h2 class="font_main_rgt"><span class="icon_ping"></span>同类型推荐</h2>
                <p class="score_num clear">推荐评分:<span>5.0</span></p>
                <!--商家星星评分-->
                <ul class="clearfix">
                    <li class="alert alert-success">
                        <span>草药名称：</span>
                        <span class="fs fontBlue fontNum">{{ tuijian.name }}</span>
                    </li>
                    <li class="alert alert-success">
                        <span>草药简介：</span>
                        <span class="fs fontBlue fontNum">{{ tuijian.jianjie }}</span>
                    </li>
                    <li class="alert alert-success">
                        <span>草药功效：</span>
                        <span class="icon_star"><b id="b_rate"></b></span>
                        <span class="fs fontBlue fontNum">{{ tuijian.gongxiao }}</span>
                    </li>

                    <li>
                        <a href="/bbf/product_details/?id={{ tuijian.id }}">
                            <button class="btn btn-primary">查看该草药</button>
                        </a>
                    </li>

                </ul>


            </div>
            <!--右侧   结束-->


        </div>
    </div>
    <!--主体部分  结束-->
{% endblock %}

